<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="CYW">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            height: 2000px;
        }

        header {
            width: 100%;
            height: 30px;
            font-size: 13px;
            font-weight: 700;
            border: 1px solid transparent;
            border-bottom: 1px solid gray;
            line-height: 30px;
            display: flex;
            justify-content: flex-end;
        }

        header a {
            margin-right: 25px;
        }

        header a:nth-of-type(9) {
            margin-left: 20px;
        }

        header a:nth-of-type(9),
        a:nth-of-type(10),
        a:nth-of-type(11),
        a:nth-of-type(12) {
            font-weight: normal;
        }

        section {

            /* line-height: 145px;   */
            /* text-align: center;  */
            height: 145px;
            width: 100%;
            border: 1px solid transparent;
        }

        .baidu-logo {
            margin-right: 10px;
            width: 135px;
            height: 45px;
        }

        #search {
            width: 535px;
            height: 40px;
        }

        #baidu {
            width: 104px;
            height: 40px;
            color: white;
            font-size: 16px;
            background-color: #3388ff;
            border: none;
            margin-left: -5px;
        }

        .header-second a {
            font-size: 13px;
            margin-left: 15px;
        }

        .radio {
            font-size: 13px;
            width: 200px;
            margin-left: 148px;
            border: 1px solid transparent;
        }

        .neirong {
            margin: 0 auto;
            margin-top: 20px;
            width: 960px;
            height: 100px;
            border: 1px solid transparent;
        }

        nav {
            /* position: fixed; */
            /* top */
            width: 100%;
            height: 40px;
            background-color: #01204f;
            position: relative;
        }

        .header-three {
            position: relative;
            line-height: 40px;
            width: 950px;
            height: 40px;
            border: 1px solid transparent;
            color: white;
            list-style: none;
            margin: 0;
            margin-left: 360px;
            padding: 0;
            display: flex;
        }

        .header-three>li {
            /* margin-left: 20px; */
            /* float: left; */
            z-index: 100px;
            padding: 0 10px;
        }

        .aside {
            /* position: absolute; */
            position: fixed;
            right: 30px;
            bottom: -55px;
            width: 52px;
            height: 360px;
            border: 1px solid red;
        }

        .back-top {
            text-align: center;
            transition: all 0.5s linear;
        }

        .aside div {
            width: 48px;
            height: 50px;
            margin-top: 2px;
            background-color: skyblue;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        .aside div:nth-of-type(1) {
            width: 50px;
            height: 90px;
        }

        .red-block {
            background-color: red;
        }

        .bg {
            height: 40px;
            width: 60px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
            /* z-index: -1;    */
        }
    </style>
</head>

<body>
    <header>
        <a href="">网页</a>
        <a href="">新闻</a>
        <a href="">知道</a>
        <a href="">音乐</a>
        <a href="">图片</a>
        <a href="">视频</a>
        <a href="">地图</a>
        <a href="">文库</a>
        <span>|</span>
        <a href="">百度首页</a>
        <a href="">登录</a>
        <a href="">注册</a>
        <a href="">百度新闻客户端</a>
    </header>
    <section class="header-second">
        <div class="neirong">
            <img class="baidu-logo" src="baidu.png" alt="百度LOGO">
            <input type="text" id="search" placeholder="">
            <input type="button" id="baidu" value="百度一下">
            <a href="">帮助</a>
            <a href="">高级搜索</a>
            <a href="">设置</a>

            <div class="radio">
                <input type="radio" name='xx'>新闻全文
                <input type="radio" name='xx'>新闻标题
            </div>

        </div>
    </section>
    <nav class="nav">
        <ul class="header-three clearfix">
            <li class="red-block">首页</li>
            <li>百家号</li>
            <li>国内</li>
            <li>国际</li>
            <li>军事</li>
            <li>社会</li>
            <li>财经</li>
            <li>娱乐</li>
            <li>体育</li>
            <li>互联网</li>
            <li>科技</li>
            <li>游戏</li>
            <li>时尚</li>
            <li>女人</li>
            <li>汽车</li>
            <li>个性推荐</li>
            <li>更多</li>
            <div class="bg"></div>
        </ul>
    </nav>
    <aside class="aside">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="back-top">返回顶部</div>
    </aside>
</body>

</html>
<script>
    var body = document.querySelector('body');
    var nav = document.querySelector('.nav');
    var aside = document.querySelector('aside');

    body.onscroll = function () {
        if (body.scrollTop > 174) {
            nav.style.top = 0;
            nav.style.position = 'fixed';
        }
        else {
            //  nav.style.cssText = '';
            nav.style.position = 'static';
        }
        if (body.scrollTop > 55) {
            aside.style.bottom = 0;
            aside.style.position = 'fixed';
        } else {
            aside.style.cssText = '';
        }

    }

    var div = document.querySelector('.back-top');
    div.onclick = function () {
        // document.documentElement.scrollTop = 
        document.body.scrollTop = 0;
    }

    var lis = document.querySelectorAll('li');
    var bg = document.querySelector('.bg');
    for (var i = 0; i < lis.length; i++) {
        // 鼠标进来 改变 bg 的位置和宽度
        lis[i].onmouseover = function () {
            // console.log(this.offsetLeft);
            // 元素距离容器左边的偏移距离
            var left = this.offsetLeft;
            // 设置bg的偏移距离
            bg.style.left = left + 'px';
            // 获取标签的宽度
            var width = this.offsetWidth;
            bg.style.width = width + 'px';
        }
        // 鼠标出去的时候，恢复bg的位置和宽度
        lis[i].onmouseout = function () {
            bg.style.left = 0;
            bg.style.width = '60px';
        }
    }

</script>